import {useState, useEffect, FC } from 'react';
import * as echarts from 'echarts';
import { Col, Row, Space } from 'antd';
import { getData } from '@/api/data';
interface EchartsProps {}

const Echarts: FC<EchartsProps> = () => {
  const [height] = useState(document.body.offsetHeight) // 计算body的高度
  
  const [myChart1, setMyChart1] = useState<any>()
  const [option1] = useState<any>({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    tooltip: {},
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  })
  useEffect(() => {
    setMyChart1(echarts.init(document.getElementById('main1') as HTMLElement))
  }, [])
  useEffect(() => {
    myChart1 && myChart1.setOption(option1)
  }, [myChart1, option1])

  const [myChart2, setMyChart2] = useState<any>()
  const [option2] = useState<any>({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  })
  useEffect(() => {
    setMyChart2(echarts.init(document.getElementById('main2') as HTMLElement))
  }, [])
  useEffect(() => {
    myChart2 && myChart2.setOption(option2)
  }, [myChart2, option2])

  const [myChart3, setMyChart3] = useState<any>()
  const [option3] = useState<any>({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center',
      // doesn't perfectly work with our tricks, disable it
      selectedMode: false
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '70%'],
        // adjust the start angle
        startAngle: 180,
        label: {
          show: true,
          formatter(param: { name: string; percent: number; }) {
            // correct the percentage
            return param.name + ' (' + param.percent * 2 + '%)';
          }
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' },
          {
            // make an record to fill the bottom 50%
            value: 1048 + 735 + 580 + 484 + 300,
            itemStyle: {
              // stop the chart from rendering this piece
              color: 'none',
              decal: {
                symbol: 'none'
              }
            },
            label: {
              show: false
            }
          }
        ]
      }
    ]
  })
  useEffect(() => {
    setMyChart3(echarts.init(document.getElementById('main3') as HTMLElement))
  }, [])
  useEffect(() => {
    myChart3 && myChart3.setOption(option3)
  }, [myChart3, option3])

  const [myChart4, setMyChart4] = useState<any>()
  const [option4, setOption4] = useState<any>({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  })
  useEffect(() => {
    setMyChart4(echarts.init(document.getElementById('main4') as HTMLElement))
  }, [])
  useEffect(() => {
    myChart4 && myChart4.setOption(option4)
  }, [myChart4, option4])

  useEffect(() => {
    getData().then(res => {
      const arr = res.data.data
      console.log(arr)
      const xArr: string[] = []
      const yData: number[] = []
      arr.forEach((item: any) => {
        xArr.push(item.x)
        yData.push(item.val)
      })
      setOption4({
        xAxis: {
          type: 'category',
          data: xArr
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yData,
            type: 'line'
          }
        ]
      })
    })
  }, [])

  useEffect(() => {
    window.onresize = function () {
      myChart1.resize()
      myChart2.resize()
      myChart3.resize()
      myChart4.resize()
    }
  }, [myChart1, myChart2, myChart3, myChart4])
  return (
    <Space direction='vertical' style={{ width: '100%', height:'100%', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1}}>
        <Row gutter={24} >
          <Col span={11} style={{ height: (height - 195) / 2}}>
            <div id="main1" style={{ width: '100%', height: '100%' }}></div>
          </Col>
          <Col offset={2} span={11} style={{  height: (height - 195) / 2}}>
            <div id="main2" style={{ width: '100%', height: '100%' }}></div>
          </Col>
        </Row>
      </div>
      <div style={{ flex: 1}}>
        <Row gutter={24} >
          <Col span={11} style={{ height: (height - 195) / 2}}>
            <div id="main3" style={{ width: '100%', height: '100%' }}></div>
          </Col>
          <Col offset={2} span={11} style={{ height: (height - 195) / 2}}>
            <div id="main4" style={{ width: '100%', height: '100%' }}></div>
          </Col>
        </Row>
      </div>
    </Space>
  );
}

export default Echarts;